<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>动画-案例《手风琴》</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
            width: 2400px;
        }

        #box {
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: 100px auto;
            overflow: hidden;
        }

        #box li {
            width: 100px;
            height: 400px;
            float: left;
            transition: all 0.5s ease-out;
        }

        #box li.over {
            width: 800px;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul>
            <li v-for="(item,index) in list" :class="{ over:overIndex==index }" @mouseover="doOver(index)">
                <img :src="list[index]" alt="" />
            </li>
        </ul>
    </div>

    <script src="./vue.js"></script>
    <script>
        let app = new Vue({
            el: '#box',
            data: {
                overIndex: 0,
                list: [
                    './images/collapse/1.jpg',
                    './images/collapse/2.jpg',
                    './images/collapse/3.jpg',
                    './images/collapse/4.jpg',
                    './images/collapse/5.jpg'
                ],
                timeID: null
            },
            methods: {
                doOver(index) {
                    clearTimeout(this.timeID)
                    let timeID = setTimeout(() => {
                        this.overIndex = index
                    }, 500);
                }
            }
        })
    </script>
</body>

</html>